<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
        <div class="acea-row row-between-wrapper mb20">
            <div class="header-title">交易概况
                <Poptip word-wrap width="500" trigger="hover"  placement="right-start">
                    <Icon type="ios-information-circle-outline" />
                    <div slot="content">
                        <div>营业额</div>
                        <div>产品支付金额、充值金额、购买付费会员金额、线下收银金额</div><br>
                        <div>交易毛利金额</div>
                        <div>交易毛利金额 = 营业额 - 支出金额</div><br>
                        <div>产品支付金额</div>
                        <div>选定条件下，用户购买产品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额
                            （拼团产品在成团之后计入，线下支付订单在后台确认支付后计入）</div><br>
                        <div>购买会员金额</div>
                        <div>选定条件下，用户成功购买付费会员的金额</div><br>
                        <div>充值金额</div>
                        <div>选定条件下，用户成功充值的金额</div><br>
                        <div>线下收银金额</div>
                        <div>选定条件下，用户在线下扫码支付的金额</div><br>
                        <div>支出金额</div>
                        <div>余额支付金额、支付佣金金额、产品退款金额</div><br>
                        <div>余额支付金额</div>
                        <div>用户下单时使用余额实际支付的金额</div><br>
                        <div>佣金支付金额</div>
                        <div>后台给推广员支付的推广佣金，以实际支付为准</div><br>
                        <div>产品退款金额</div>
                        <div>用户成功退款的产品金额</div>
                    </div>
                </Poptip>
            </div>
            <div class="acea-row">
                <DatePicker :editable="false" :clearable="false" @on-change="onchangeTime" :value="timeVal" format="yyyy/MM/dd"
                            type="datetimerange" placement="bottom-start" placeholder="自定义时间"
                            style="width: 200px;" class="mr20" :options="options"></DatePicker>
                <Button type="primary" class="mr20" @click="onSeach">查询</Button>
                <Button type="primary" @click="excel">导出</Button>
            </div>
        </div>
        <div class="acea-row mb20">
            <div class="infoBox acea-row mb30" v-for="(item, index) in list" :key="index">
                <div class="iconCrl mr15" :class="{'one':index%4==0,'two':index%4==1,'three':index%4==2,'four':index%4==3}"><i class="iconfont" :class="item.icon"></i></div>
                <div class="info">
                    <span class="sp1" v-text="item.name"></span>
                    <span class="sp2" v-if="index === list.length-1" v-text="item.money?( parseInt( item.money * 100 ) / 100 ).toFixed(2):0"></span>
                    <span class="sp2" v-else v-text="item.money?( parseInt( item.money * 100 ) / 100 ).toFixed(2):0"></span>
                    <span class="content-time spBlock">环比增长：<i class="content-is" :class="Number(item.rate)>=0?'up':'down'">{{ item.rate }}%</i><Icon :color="Number(item.rate)>=0?'#F5222D':'#39C15B'" :type="Number(item.rate)>=0?'md-arrow-dropup':'md-arrow-dropdown'" /></span>
                </div>
            </div>
        </div>
        <echarts-new :option-data="optionData" :styles="style" height="100%" width="100%" v-if="optionData"></echarts-new>
        <Spin size="large" fix v-if="spinShow"></Spin>
    </Card>
</template>

<script>
    import { statisticBottomTradeApi, statisticTrendApi } from '@/api/statistic'
    import echartsNew from '@/components/echartsNew/index'
    import { formatDate } from '@/utils/validate';
    export default {
        name: "transaction",
        components: {
            echartsNew
        },
        data() {
            return {
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 8,
                    sm: 24,
                    xs: 24
                },
                options: this.$timeOptions,
                name: '近30天',
                timeVal: [],
                dataTime: '',
                list: {},
                optionData: {},
                style: { height: '400px' },
                getExcel:'',
                spinShow: false
            }
        },
        created() {
            const end = new Date()
            const start = new Date()
            start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)));
            this.timeVal = [start, end]
            this.dataTime = formatDate(start, 'yyyy/MM/dd')+ '-'+ formatDate(end, 'yyyy/MM/dd');
        },
        mounted() {
            this.getStatistics();
        },
        methods: {
            onSeach(){
                this.getStatistics();
            },
            // 具体日期
            onchangeTime (e) {
                this.timeVal = e
                this.dataTime = this.timeVal.join('-');
                this.name = this.dataTime;
            },
            // 统计
            getStatistics() {
                this.spinShow = true;
                statisticBottomTradeApi({data: this.dataTime}).then(async res => {
                    const cardLists = res.data;
                    const incons = ['iconyingyee', 'iconjiaoyijine', 'iconshangpinzhifujine', 'icongoumaihuiyuanjine', 'iconchongzhijianshu', 'iconxianxiashouyinjine','iconzhichujine','iconyuezhifujine','iconzhifuyongjinjine','iconshangpintuikuanjine']
                    for(var i=0;i< cardLists.series.length;i++){
                        this.$set(cardLists.series[i], 'icon', incons[i])
                    }
                    this.list = cardLists.series;
                    this.getExcel = cardLists.export;
                    this.get(cardLists);
                    this.spinShow = false;
                }).catch(res => {
                    this.$Message.error(res.msg);
                    this.spinShow = false;
                })
            },
            get(extract){
                let dataList = extract.series.filter(item => {
                    return item.type === 1
                })
                let legend = dataList.map(item => {
                    return item.name
                })
                let col = ['#5B8FF9', '#5AD8A6', '#5D7092', '#F5222D','#FFAB2B','#B37FEB'];
                let seriesData = []
                dataList.map((item,index) => {
                    let series = []
                    Object.keys(item.value).forEach((key) => {
                        series.push(Number(item.value[key]))
                    })
                    seriesData.push({
                        name: item.name,
                        type: 'line',
                        data:  series,
                        itemStyle: {
                            normal: {
                                color: col[index]
                            }
                        },
                        smooth: true
                    })
                })
                this.optionData = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        x:'center',
                        data: legend
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisLabel: {
                            interval: 0,
                            rotate: 40,
                            textStyle: {
                                color: '#000000'
                            }
                        },
                        data: extract.x
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#7F8B9C'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#F5F7F9'
                            }
                        }
                    },
                    series: seriesData
                }
            },
            excel(){
                window.location.href = this.getExcel
            },
            // 统计图
            getTrend() {
                statisticTrendApi({data: this.dataTime}).then(async res => {
                    let legend = res.data.series.map(item => {
                        return item.name
                    })
                    let xAxis = res.data.xAxis;
                    let col = ['#5B8FF9', '#5AD8A6', '#5D7092', '#5D7092'];
                    let series = []
                    res.data.series.map((item,index) => {
                        series.push({
                            name: item.name,
                            type: 'line',
                            data: item.value,
                            itemStyle: {
                                normal: {
                                    color: col[index]
                                }
                            }
                        })
                    })
                    this.optionData = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            x: '1px',
                            y: '10px',
                            data: legend
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: true,
                            // axisTick:{
                            //     show:false
                            // },
                            // axisLine:{
                            //     show:false
                            // },
                            // splitLine: {
                            //     show: false
                            // },
                            axisLabel: {
                                interval: 0,
                                rotate: 40,
                                textStyle: {
                                    color: '#000000'
                                }
                            },
                            data: xAxis
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            }
                        },
                        series: series
                    }
                    // this.TrendList =
                }).catch(res => {
                    this.$Message.error(res.msg)
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .one {
        background: #1890FF;
    }
    .two {
        background: #00C050;
    }
    .three {
        background: #FFAB2B;
    }
    .four {
        background: #B37FEB;
    }
    .up,
    .el-icon-caret-top {
        color: #F5222D;
        font-size: 12px;
        opacity: 1 !important;
    }

    .down,
    .el-icon-caret-bottom {
        color: #39C15B;
        font-size: 12px;
    }
    .curP{
        cursor: pointer;
    }
    .header{
        &-title{
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
        }
        &-time{
            font-size:12px;
            color: #000000;
            opacity: 0.45;
        }
    }

    .iconfont {
        font-size: 16px;
        color: #fff;
    }

    .iconCrl {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        opacity: .7;
    }

    .lan {
        background: #1890FF;
    }

    .iconshangpinliulanliang {
        color: #fff;
    }

    .infoBox {
        width: 20%;
        @media screen and (max-width: 1300px) {
            width: 25%;
        }
        @media screen and (max-width: 1200px) {
            width: 33%;
        }
        @media screen and (max-width: 900px) {
            width: 50%;
        }
    }

    .info {
        .sp1 {
            color: #666;
            font-size: 14px;
            display: block;
        }
        .sp2 {
            font-weight: 400;
            font-size: 30px;
            color: rgba(0, 0, 0, 0.85);
            display: block;
        }
        .sp3 {
            font-size: 12px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            display: block;
        }
    }
</style>